<template>
  <div class="app-container">
    <div class="post-detail">
      <h1>{{ post.title }}</h1>
      <div class="text item">
        <div class="post-item-info-name">
          <span>发帖人:&nbsp;</span>
          <span>{{ post.name }}</span>
        </div>
        <div class="post-item-info-time">
          <span>发帖时间:&nbsp;</span>
          <span>{{ post.operateTime }}</span>
        </div>
      </div>
      <p>
      <dl v-html="post.content"></dl>
      </p>
    </div>
  </div>
</template>

<script>
import invitationApi from '@/api/invitation'
import postItem from '@/components/postItem';
export default {
  components: {
    postItem
  },
  data() {
    return {
      role: this.$store.getters.roles,
      id: null,
      post: {}
    }
  },
  watch: { // 监听
    $route(to, from) {
      if (this.$route.params && this.$route.params.id) {
        this.id = this.$route.params.id
        this.getInfo()
      } else {
        this.$router.push({ path: '/404' })
      }
    }
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.id = this.$route.params.id
      // 调用根据id查询课程的方法
      this.getInfo()
    } else {
      this.$router.push({ path: '/404' })
    }
  },
  methods: {
    getInfo() {
      invitationApi.getDetail(this.id)
        .then(response => {
          this.post = response.data.item
        })
    },
  }
}
</script>
<style lang="scss">
.post-detail {
  padding:0 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .text.item{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding:0 20%;
  }
  dl{
    margin-top:0;
    padding: 5%;
    background-color:#d9ecff;
  }
}
</style>
